<template>
  <div id="mymap" style="width: 100%; height: 980px"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted } from "vue";
import chinaMap from "@/json/china.json";

onMounted(() => {
  let myMap = echarts.init(document.getElementById("mymap")!);
  echarts.registerMap("ZH", chinaMap as any);
  myMap.setOption(
    ({
      title: {
        text: "Population Density of Hong Kong （2011）",
      },
      tooltip: {
        trigger: "item",
        formatter: "{b}<br/>{c} (p / km2)",
      },
      toolbox: {
        show: true,
        orient: "vertical",
        left: "right",
        top: "center",
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {},
        },
      },
      visualMap: {
        min: 800,
        max: 50000,
        text: ["High", "Low"],
        realtime: false,
        calculable: true,
        inRange: {
          color: ["lightskyblue", "yellow", "orangered"],
        },
      },
      series: [
        {
          name: "香港18区人口密度",
          type: "map",
          map: "ZH",
        //   label: {
        //     show: true,
        //   },
          data: [],
          zoom:1.2
        },
      ],
    })
  );
});
</script>

<style scoped></style>
